<script setup lang="ts">
defineOptions({
  name: "energyBord"
});
import { markRaw, ref, computed, onMounted, nextTick } from "vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import consume_all from "@/assets/svg/energy/consume_all.svg?component";
import consume_fab from "@/assets/svg/energy/consume_fab.svg?component";
import consume_fp from "@/assets/svg/energy/consume_fp.svg?component";
import consume_life from "@/assets/svg/energy/consume_life.svg?component";
import elec_co2 from "@/assets/svg/energy/elec_co2.svg?component";
import elec_mei from "@/assets/svg/energy/elec_mei.svg?component";
import elec_money from "@/assets/svg/energy/elec_money.svg?component";
import elec_used from "@/assets/svg/energy/elec_used.svg?component";

const iconComList = {
  elec_co2: markRaw(elec_co2),
  elec_mei: markRaw(elec_mei),
  elec_money: markRaw(elec_money),
  elec_used: markRaw(elec_used)
};

interface Props {
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  width?: number;
  /**  模块最低高度，默认 292px */
  height?: number;
  imageSize?: number;
  /**  数据列表 */
  dataList?: any[];
}

interface Emits {
  (event: "request-data"): void;
}

const emits = defineEmits<Emits>();

const props = withDefaults(defineProps<Props>(), {
  width: 667,
  height: 292,
  imageSize: 100
});

const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

onMounted(() => {
  emits("request-data");
});
</script>

<template>
  <div class="energy-desk-content">
    <modelTitle v-if="title" :title="title" />
    <!-- <div v-if="dataList && dataList.length > 3" class="energy-desk-content-list">
      <div v-for="data in dataList" :key="data.icon" class="content-item">
        <component :is="iconComList[data?.icon]" class="content-icon color-total" />
        <div class="content-box">
          <div class="content-box-label">{{ data?.name }}</div>
          <div class="content-box-data">
            <span class="data-text color-total">{{ data?.valueFormat || "--" }}</span
            ><span>&nbsp;{{ data?.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="dataList && dataList.length === 3" class="energy-desk-content-list list-3">
      <div v-for="data in dataList" :key="data.icon" class="content-item">
        <component :is="iconComList[data?.icon]" class="content-icon color-total" />
        <div class="content-box">
          <div class="content-box-label">{{ data?.name }}</div>
          <div class="content-box-data">
            <span class="data-text color-total">{{ data?.valueFormat || "--" }}</span
            ><span>&nbsp;{{ data?.unit }}</span>
          </div>
        </div>
      </div>
    </div> -->
    <div class="energy-desk-content-list list-3">
      <div
        v-for="(data, index) in dataList"
        :key="data.icon"
        :class="{ 'content-item': true, 'flex-1': index === 0 }"
        :style="{ 'flex-direction': index === 0 ? 'row' : 'column' }"
      >
        <component :is="iconComList[data?.icon]" class="content-icon color-total" />
        <div class="content-box-label">{{ data?.name }}</div>
        <div class="content-box">
          <div class="content-box-data">
            <span class="data-text color-total">{{ data?.valueFormat || "--" }}</span
            ><span>&nbsp;{{ data?.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!(dataList && dataList.length)" class="echarts-empty">
      <px-empty :image-size="imageSize" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.energy-desk-content {
  box-sizing: border-box;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);

  .energy-desk-content-list {
    display: flex;
    flex-flow: row wrap;
    gap: 12px;
    align-items: flex-start;

    .content-item {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;
      // width: 30%;
      margin-top: 35px;
      margin-left: 30px;
    }

    .color-done {
      color: $colorDone;
    }

    .color-total {
      color: $colorTotal;
    }

    .content-icon {
      width: 36px;
      height: 36px;
    }

    .data-text {
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .content-box {
      display: flex;
      // flex-direction: column;
      gap: 12px;

      .content-box-label {
        font-weight: 600;
        line-height: 1;
        color: #555;
        white-space: nowrap;
      }

      .content-box-data {
        display: flex;
        align-items: center;
      }
    }
  }

  .list-3 {
    .content-item {
      width: 25%;
    }

    .flex-1 {
      flex-basis: 100%;

      .data-text {
        font-size: 37px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }
    }
  }
}
</style>
